import React, { useEffect } from 'react';
import { Form, Input, Select, Radio, Button, Card } from 'antd';
import { IArea } from 'api/Area';
import { IUser } from 'api/User';
const { Option } = Select
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};

interface IProps {
    areas: IArea[],
    user: IUser | undefined
}
const UserForm = (props: IProps) => {
    /** 表单初始化 */
    const [form] = Form.useForm();
    console.log(props.user)
    useEffect(() => {
        if (!props.user) {
            form.resetFields()
            return
        }
        const { id, username, mobile, areaId } = props.user
        form.setFieldsValue({
            id,
            username,
            mobile,
            areaId
        })
    }, [props.user])
    const setDefaultPassword = () => {
        form.setFields([{name: 'password', value: '123456' }])
    }
    return (
        <Form {...layout} form={form}>
            <Form.Item label="用户ID" name="id" rules={[{ required: true, message: '请输入用户ID' }]}>
                <Input placeholder="请输入用户ID"/>
            </Form.Item>
            <Form.Item label="初始密码">
                <Form.Item name="password" rules={[{ required: true, message: '请输入用户ID' }]} style={{ display: 'inline-block', marginBottom: 0}}>
                    <Input placeholder="支持6~15位数字或字母" className="mr10" style={{width: 266}}/>
                </Form.Item>
                <Button onClick={setDefaultPassword}>系统默认密码</Button>
            </Form.Item>
            <Form.Item label="姓名" name="username" rules={[{required: true, message: '请输入姓名'}]}>
                <Input placeholder="请输入姓名"/>
            </Form.Item>
            <Form.Item label="手机号" name="mobile" rules={[{required: true, message: '请输入手机号'}]}>
                <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item label="负责区域" name="areaId" rules={[{ required: true, message: '请选择负责区域' }]}>
                <Select>
                    <Option value="all">全部</Option>
                    { props.areas.map((area: IArea) => <Option key={area.id} value={area.id || ''}>{area.name}</Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="账号类型" name="type" rules={[{ required: true, message: '请选择账号类型' }]}>
                <Radio.Group>
                    <Radio value="1">普通账号</Radio>
                    <Radio value="2">管理员账号</Radio>
                </Radio.Group>
            </Form.Item>
            <Card>
                <p>账号类型说明</p>
                <p>普通账号：仅可管控负责区域的路桩，无法修改系统配置</p>
                <p>管理员账号：可全局配置系统及查看所有路桩状态</p>
            </Card>
        </Form>
    )
}
export default UserForm